<template>
  <el-form-item label="字体类型">
    <el-radio-group v-model="editorForm.fontFamily.isDefault" @change="handleDefault">
      <el-radio :label="true">默认</el-radio>
      <el-radio :label="false">自定义</el-radio>
    </el-radio-group>
    <div v-if="!editorForm.fontFamily.isDefault" class="custom-after">
      <el-select v-model="editorForm.fontFamily.value" placeholder="选择字体" style="width: 90px" allow-create filterable default-first-option @change="handleFontChange">
        <el-option v-for="item in fontOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
  </el-form-item>
</template>

<script setup>
import { inject, ref, onMounted } from 'vue'

const { editorForm, domList, changeDefault, backUpdate } = inject('commonForm')
// 初始化属性和元素对应关系
const bindDom = ref([])
const initDomMapping = () => {
  const bindKeys = [`${editorForm.value._key}.fontFamily.value`]
  domList.value.forEach(element => {
    const bindValue = element.getAttribute('_bind')
    bindKeys.forEach(key => {
      if (bindValue.includes(key)) {
        bindDom.value.push(element)
      }
    })
  })
}

const handleDefault = (val) => {
  if (val) {
    changeDefault('fontFamily')
  }
  bindDom.value.forEach(element => {
    element.style.fontFamily = editorForm.value.fontFamily.value
  })
  if (bindDom.value.length === 0) {
    backUpdate()
  }
}

const handleFontChange = () => {
  bindDom.value.forEach(element => {
    element.style.color = editorForm.value.color.value
  })
  if (bindDom.value.size === 0) {
    backUpdate()
  }
}

const fontOptions = ref([
  { label: '微软雅黑', value: 'Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif' },
  { label: '苹果苹方', value: 'PingFang SC,Microsoft YaHei,sans-serif' },
  { label: '宋体', value: 'simsun,serif' },
  { label: '仿宋体', value: 'FangSong,serif' },
  { label: '黑体', value: 'SimHei,sans-serif' },
  { label: 'Georgia', value: 'Georgia' },
  { label: 'Arial', value: 'arial,helvetica,sans-serif' },
  { label: 'Arial Black', value: 'arial black,avant garde' },
  { label: 'Book Antiqua', value: 'book antiqua,palatino' }
])

onMounted(() => {
  initDomMapping()
})
</script>

<style lang="scss" scoped>

</style> 